
#maincontent
{
	display: table;
}

#maintable
{
	display: table-cell;
	
}

#instructions
{
	float: right;
}

#information
{
	float: left;
}

#assessmentlink
{
	display: none;
}

#certificate
{
	display: none;
}

#drop
{
	background-color: #FFAAFF;
}

#bodyexercise
{
	background-color: #FF5F5F;
}

#bodyassessment
{
	background-color: #CC66FF;
}

#bodynutrition
{
	background-color: #5CD65C;
}

#bodymassage
{
	background-color: #3399FF;
}


#bodyprofile
{
	background-color: #FFD700;
}

#bodyelectric
{
	background-color: #FF8C00;
}

#listcolors
{
	color: white;
}

#stretch
{
	float: left;
}

#massageimage
{
	padding: 70px; 
	float: right;
}

#spacing
{
	margin: 15px;
	padding: 5px;
}

#nutspacing
{
	margin: 20px;
	padding: 8px;
}

#drop ul #option0
{
	border-left: solid;
	border-right: solid;
	border-color: black;
	color: black;
	background-color: #FF8C00;
}

#drop ul #option1
{
	border-left: solid;
	border-right: solid;
	border-color: black;
	color: black;
	background-color: #FFD700;	
}

#drop ul #optionX
{
	border-left: solid;
	border-right: solid;
	border-color: black;
	color: black;
	background-color: #CC66FF;
}

#drop ul .show
{
	display: block;
}

#drop li .show
{
	display: block;
}

#drop li .hide
{
	display: none;
}

#drop ul .hide
{
	display: none;
}

#drop ul #option4
{
	background-color: #3399FF;
	color: black;
	border-left: solid;
	border-right: solid;
	border-color: black;
}

#drop ul #option2
{
	background-color: #5CD65C;
	color: black;
	border-color: black;
	border-left: solid;
	border-right: solid;
}

#drop ul #option1:hover
{
	background-color: #FFD700;
}

#drop ul #option3
{
	background-color: #FF5F5F;
	color: black;
	border-color: black;
	border-left: solid;
	border-right: solid;
}


#drop ul
{
	list-style-type: none;
	margin: 0px;
	padding: 0px;
	position: relative;
	min-width: 100px;
	border-style: solid;
}

/* found from mjdwebsdesign and Ralph Phillips on YouTube */

#drop ul li
{
	display: inline-block;
}

#drop ul li a,visited
{
	display: block;
	padding: 10px;
	color: blue;
	margin: 5px;
	text-decoration: none;
}

#drop ul li a:hover
{
	color: white;
}

#drop ul li:hover ul
{
	display: block;
	background-color: #FFAAFF;
}

#drop ul li #drop2:hover ul
{
	display: block;
	background-color: yellow;
}


#drop ul ul
{
	display: none;
	position: absolute;
	margin: 0px;
}

#drop ul ul li
{
	margin: 0px;
	display: block;
}

#drop .hide
{
	display: none;
}

#drop .show
{
	display: block;
}

.massage
{
	float: left;
}

p.text
{
	width: 700px;
	float: left;
}

#image
{
	width: 300px;
	clear: right;
}

body
{
	padding: 0;
	margin: 0;
	font-family: arial;
}

#footer
{
	clear: both;
}



/* styles for drag and drop */

.column
{
	display: table-cell;
	padding: 25px;
	width: 1200px;
}

.dragger
{
	border: solid thin #000000;
	background: #999999;
	
	text-align: center;
	height: 50px;
	width: 600px;
	vertical-align: center;
	cursor: move;
	position: relative;
	ghosting: true;
}

#h1
{
	text-align: center;
}

#p
{
	text-align: center;

}

#h3
{
	text-align: center;
}

.dragger p
{
	font-weight: bold;
}

.draggerbay
{
	border: dashed thin #000000;
	height: 50px;
	width: 600px;
	text-align: center;
	background: #ccccee;
}

[draggable=true] 
{
  -khtml-user-drag: element;
  -webkit-user-drag: element;
  -khtml-user-select: none;
  -webkit-user-select: none;
}